<template>
  <div class="nScore scrollY">
    <Back />
    <Title label="指标体系"  />
    <ul class="scoreData">
      <!-- 一级指标 -->
      <li
        class="scoreDataItem"
        :class="{s:index===0}"
        v-for="(item, index) in scoreData"
        :key="index"
        :style="{ background: item.backgroundColor }"
      >
        <ul class="scoreUl">
          <li class="subItem" v-for="(subItem, subIndex) in item.data" :key="subIndex">
            <template v-if="subItem.label">
              <div>
                <span class="label"
                  >{{ subItem.label }}
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="subItem.notes"
                    placement="right"
                    v-if="subItem.notes"
                  >
                    <el-icon class="ml5" color="#777"
                      ><InfoFilled
                    /></el-icon> </el-tooltip
                ></span>
                <span class="characteristic">{{ subItem.characteristic }}</span>
              </div>
            </template>
            <template v-else>
              <ul style="height: 100%" class="vItem">
                <!-- 三级指标 -->
                <li
                  :style="{ height: vItem.height,background:vItem.max && '#fff' }"
                  style="font-size:15px;"
                  v-for="(vItem, vIndex) in subItem.children"
                  :key="vIndex"
                >
                  <template v-if="vItem.label">
                    <span
                      >{{ vItem.label }}
                      <el-tooltip
                        class="box-item"
                        effect="dark"
                        :content="vItem.notes"
                        placement="right"
                        v-if="vItem.notes"
                      >
                        <el-icon class="ml5" color="#777"
                          ><InfoFilled
                        /></el-icon> </el-tooltip
                    ></span>
                  </template>
                  <template v-else>
                    <el-rate class="box-item" :max="vItem.max" v-model="vItem.saveStars" clearable />
                  </template>
                </li>
              </ul>
            </template>
          </li>
        </ul>
      </li>
    </ul>
    <div class="saveBtn" @click="handleSave">提交</div>
  </div>
</template>

<script setup lang="ts">
import Title from "@/components/Title.vue";
import Back from "@/components/Back.vue";
import Background from "../videoMake/Background.vue";
import { ref } from "vue";
import { submitScore } from '@/api/home';
import { ElMessage, ElMessageBox } from 'element-plus'
import { watch } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const id:any = ref(0);
watch(() => route.query, (newQuery) => {
  id.value = newQuery.id;
}, { immediate: true });

const scoreData = ref([
  {
    label: "指标",
    backgroundColor: "#EFEFEF",
    data: [
      {
        label: "一级指标",
      },
      {
        label: "指标权重",
      },
      {
        label: "二级指标",
      },
      {
        label: "指标权重",
      },
      {
        label: "三级指标",
      },
      {
        label: "指标权重",
      },
      {
        label: "评分",
      },
    ],
  },
  {
    label: "合规属性",
    backgroundColor: "#ECF2FB",
    data: [
      {
        label: "合规属性",
        notes: "数据符合法律法规、规章制度和各类标准的程度",
        characteristic: "(合规)",
      },
      {
        label: "15%",
      },
      {
        children: [
          {
            label: "规范性",
            height: "60%",
          },
          {
            label: "安全性",
            height: "40%",
          },
        ],
      },
      {
        children: [
          {
            label: "9%",
            height: "60%",
          },
          {
            label: "6%",
            height: "40%",
          },
        ],
      },
      {
        children: [
          {
            label: "法律法规",
            notes: "数据集符合国家安全、个人隐私、商业机密等相关法律法规的度量",
            height: "20%",
          },
          {
            label: "数据授权",
            notes: "数据集使用中是否获得授权与许可",
            height: "20%",
          },
          {
            label: "数据伦理",
            notes: "数据集是否包含歧视或者偏见信息",
            height: "20%",
          },
          {
            label: "安全制度",
            notes: "数据符合隐私保护、风险评估、安全控制、应急处置和安全审查等相关制度的度量",
            height: "20%",
          },
          {
            label: "安全控制",
            notes: "数据加密、数据备份、访问控制等安全控制技术的采用",
            height: "20%",
          },
        ],
      },
      {
        children: [
          {
            label: "3%",
            height: "20%",
          },
          {
            label: "3%",
            height: "20%",
          },
          {
            label: "3%",
            height: "20%",
          },
          {
            label: "3%",
            height: "20%",
          },
          {
            label: "3%",
            height: "20%",
          },
        ],
      },
      {
        children: [
          {
            max: 1,
            saveStars: 0,
            height: "20%",
          },
          {
            max: 1,
            saveStars: 0,
            height: "20%",
          },
          {
            max: 1,
            saveStars: 0,
            height: "20%",
          },
          {
            max: 5,
            saveStars: 0,
            height: "20%",
          },
          {
            max: 5,
            saveStars: 0,
            height: "20%",
          },
        ],
      },
    ],
  },
  {
    label: "内容属性",
    backgroundColor: "#F2F8FC",
    data: [
      {
        label: "内容属性",
        notes: "数据记录所呈现的信息存在错误或异常的程度",
        characteristic: "(质优)",
      },
      {
        label: "35%",
      },
      {
        children: [
          {
            label: "准确性",
            height: "23%",
          },
          {
            label: "一致性",
            height: "23%",
          },
          {
            label: "时效性",
            height: "23%",
          },
          {
            label: "完整性",
            height: "31%",
          },
        ],
      },
      {
        children: [
          {
            label: "15%",
            height: "23%",
          },
          {
            label: "5%",
            height: "23%",
          },
          {
            label: "5%",
            height: "23%",
          },
          {
            label: "10%",
            height: "31%",
          },
        ],
      },
      {
        children: [
          {
            label: "数据内容",
            notes: "数据内容是否符合预期",
            height: "7.69%",
          },
          {
            label: "数据格式",
            notes: "数据格式是否符合规范要求",
            height: "7.69%",
          },
          {
            label: "数据来源",
            notes: "数据来源的权威程度",
            height: "7.69%",
          },
          {
            label: "格式一致性",
            notes: "数据集在存储和传输中格式是否保持一致",
            height: "7.69%",
          },
          {
            label: "标注一致性",
            notes: "数据是否保持多位标注者标注一致",
            height: "7.69%",
          },
          {
            label: "语义一致性",
            notes: "数据的定义或内涵在不同阶段和系统中是否保持一致",
            height: "7.69%",
          },
          {
            label: "数据延迟",
            notes: "数据被刷新或者更新的延迟时间",
            height: "7.69%",
          },
          {
            label: "数据更新频率",
            notes: "一段时间内的数据实际更新次数",
            height: "7.69%",
          },
          {
            label: "数据有效期",
            notes: "数据生成后是否保持在有效的时间范围内",
            height: "7.69%",
          },
          {
            label: "数据空值率",
            notes: "数据集是否存在空值",
            height: "7.69%",
          },
          {
            label: "数据重复率",
            notes: "数据集是否存在重复数据",
            height: "7.69%",
          },
          {
            label: "字段完整性",
            notes: "数据集中各个字段是否都被正确赋值，没有遗漏",
            height: "7.69%",
          },
          {
            label: "记录完整性",
            notes: "数据集中每条记录是否都包含所有必要的字段",
            height: "7.69%",
          },
        ],
      },
      {
        children: [
          {
            label: "5%",
            height: "7.69%",
          },
          {
            label: "5%",
            height: "7.69%",
          },
          {
            label: "5%",
            height: "7.69%",
          },
          {
            label: "2%",
            height: "7.69%",
          },
          {
            label: "1%",
            height: "7.69%",
          },
          {
            label: "2%",
            height: "7.69%",
          },
          {
            label: "2%",
            height: "7.69%",
          },
          {
            label: "1%",
            height: "7.69%",
          },
          {
            label: "2%",
            height: "7.69%",
          },
          {
            label: "3%",
            height: "7.69%",
          },
          {
            label: "3%",
            height: "7.69%",
          },
          {
            label: "2%",
            height: "7.69%",
          },
          {
            label: "2%",
            height: "7.69%",
          },
        ],
      },
      {
        children: [
          {
            max: 5,
            saveStars: 0,
            height: "7.69%",
          },
          {
            max: 1,
            saveStars: 0,
            height: "7.69%",
          },
          {
            max: 1,
            saveStars: 0,
            height: "7.69%",
          },
          {
            max: 1,
            saveStars: 0,
            height: "7.69%",
          },
          {
            max: 5,
            saveStars: 0,
            height: "7.69%",
          },
          {
            max: 1,
            saveStars: 0,
            height: "7.69%",
          },
          {
            max: 5,
            saveStars: 0,
            height: "7.69%",
          },
          {
            max: 5,
            saveStars: 0,
            height: "7.69%",
          },
          {
            max: 1,
            saveStars: 0,
            height: "7.69%",
          },
          {
            max: 5,
            saveStars: 0,
            height: "7.69%",
          },
          {
            max: 5,
            saveStars: 0,
            height: "7.69%",
          },
          {
            max: 1,
            saveStars: 0,
            height: "7.69%",
          },
          {
            max: 1,
            saveStars: 0,
            height: "7.69%",
          },
        ],
      },
    ],
  },
  {
    label: "规模属性",
    backgroundColor: "#ECF2FB",
    data: [
      {
        label: "规模属性",
        notes: "数据的质量会随着关联数据的规模增加而增加",
        characteristic: "(量大)",
      },
      {
        label: "25%",
      },
      {
        children: [
          {
            label: "数量级",
            height: "33.33%",
          },
          {
            label: "多样性",
            height: "33.33%",
          },
          {
            label: "全面性",
            height: "33.33%",
          },
        ],
      },
      {
        children: [
          {
            label: "10%",
            height: "33.33%",
          },
          {
            label: "9%",
            height: "33.33%",
          },
          {
            label: "6%",
            height: "33.33%",
          },
        ],
      },
      {
        children: [
          {
            label: "数据总量",
            notes: "数据集是否包含了大量的数据点或者数据记录",
            height: "16.66%",
          },
          {
            label: "数据增长趋势",
            notes: "数据的产生与更新速度",
            height: "16.66%",
          },
          {
            label: "数据类型",
            notes: "数据是否为多模态数据",
            height: "16.66%",
          },
          {
            label: "数据分布",
            notes: "数据在是否分布在不同值或者类别上",
            height: "16.66%",
          },
          {
            label: "数据领域",
            notes: "数据集是否涵盖了各个应用领域",
            height: "16.66%",
          },
          {
            label: "数据主题",
            notes: "数据集是否提供了各个业务主题的数据内容",
            height: "16.66%",
          },
        ],
      },
      {
        children: [
          {
            label: "5%",
            height: "16.66%",
          },
          {
            label: "5%",
            height: "16.66%",
          },
          {
            label: "6%",
            height: "16.66%",
          },
          {
            label: "3%",
            height: "16.66%",
          },
          {
            label: "3%",
            height: "16.66%",
          },
          {
            label: "3%",
            height: "16.66%",
          },
        ],
      },
      {
        children: [
          {
            max: 5,
            saveStars: 0,
          },
          {
            max: 5,
            saveStars: 0,
          },
          {
            max: 1,
            saveStars: 0,
          },
          {
            max: 5,
            saveStars: 0,
          },
          {
            max: 1,
            saveStars: 0,
          },
          {
            max: 1,
            saveStars: 0,
          },
        ],
      },
    ],
  },
  {
    label: "价值属性",
    backgroundColor: "#F2F8FC",
    data: [
      {
        label: "价值属性",
        notes: "数据集应用于具体场景产生的价值",
        characteristic: "(价高)",
      },
      {
        label: "25%",
      },
      {
        children: [
          {
            label: "效用性",
            height: "37.5%",
          },
          {
            label: "经济性",
            height: "25%",
          },
          {
            label: "场景性",
            height: "37.5%",
          },
        ],
      },
      {
        children: [
          {
            label: "8%",
            height: "37.5%",
          },
          {
            label: "7%",
            height: "25%",
          },
          {
            label: "10%",
            height: "37.5%",
          },
        ],
      },
      {
        children: [
          {
            label: "易用性",
            notes: "数据集可供用户使用的程度度量",
            height: "12.5%",
          },
          {
            label: "可理解性",
            notes: "被使用者理解的程度",
            height: "12.5%",
          },
          {
            label: "可访问性",
            notes: "数据在需要应用时的可获取性",
            height: "12.5%",
          },
          {
            label: "市场收益",
            notes: "数据集在应用场景中产生的收益度量",
            height: "12.5%",
          },
          {
            label: "适配成本",
            notes: "数据集在应用场景中产生的成本度量",
            height: "12.5%",
          },
          {
            label: "场景多元性",
            notes: "数据集应用于单一场景还是多场景",
            height: "12.5%",
          },
          {
            label: "业务适应性",
            notes: "数据集适用于不同业务场景和需求的能力度量",
            height: "12.5%",
          },
          {
            label: "应用可行性",
            notes: "数据在实际业务场景中的应用效果",
            height: "12.5%",
          },
        ],
      },
      {
        children: [
          {
            label: "3%",
            height: "12.5%",
          },
          {
            label: "3%",
            height: "12.5%",
          },
          {
            label: "2%",
            height: "12.5%",
          },
          {
            label: "4%",
            height: "12.5%",
          },
          {
            label: "3%",
            height: "12.5%",
          },
          {
            label: "3%",
            height: "12.5%",
          },
          {
            label: "3%",
            height: "12.5%",
          },
          {
            label: "4%",
            height: "12.5%",
          },
        ],
      },
      {
        children: [
          {
            max: 1,
            saveStars: 0,
            height: "12.5%",
          },
          {
            max: 1,
            saveStars: 0,
            height: "12.5%",
          },
          {
            max: 5,
            saveStars: 0,
            height: "12.5%",
          },
          {
            max: 5,
            saveStars: 0,
            height: "12.5%",
          },
          {
            max: 5,
            saveStars: 0,
            height: "12.5%",
          },
          {
            max: 5,
            saveStars: 0,
            height: "12.5%",
          },
          {
            max: 5,
            saveStars: 0,
            height: "12.5%",
          },
          {
            max: 5,
            saveStars: 0,
            height: "12.5%",
          },
        ],
      },
    ],
  },
]);



const handleSave = () => {
  let arr = ref([]);
  let indicatorScores = [];
  let n = 17;
  scoreData.value.forEach(item =>{
    item.data.forEach(subItem => {
      if(subItem.children) {
        arr.value = arr.value.concat(subItem.children)
      }
    })
  })
  arr.value = arr.value.filter(v => ('saveStars' in v));
  arr.value.forEach((item, index) =>{
    indicatorScores.push({
      "indicatorId": n+index,
      "score": item.saveStars
    })
  })
  const route = useRoute();
  submitScore({
    datasetId: parseInt(id.value),
    indicatorScores
  }).then(res => {
    ElMessage({
      message: '评分成功',
      type: 'success',
    })
  })
}
</script>

<style scoped lang="scss">
.nScore {
  padding: 50px 50px;
  padding-bottom:80px;
  .scoreData {
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    width: 100%;
    margin-top:10px;
    .s{
      .scoreUl {
        li {
          font-weight:550;
          padding:7px 0;
        border-top:1px solid #D7D7D7;
        }
      }
    }
    .scoreUl {
      display: flex;
      border-left: 1px solid #D7D7D7;
      li {
        border-right: 1px solid #D7D7D7;
        border-bottom: 1px solid #D7D7D7;
        width: 170px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          justify-content: center;
        }
        .characteristic {
          margin-top: 5px;
          margin-left: -5px;
        }
      }
      .vItem{
        li:last-child{
          border-bottom:0;
        }
      }
    }
  }
  .saveBtn{
    width: 180px;
    height: 45px;
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #0091FF;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: #0091FF;
    line-height: 25px;
    letter-spacing: 2px;
    text-align: left;
    font-style: normal;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:50px auto;
    cursor:pointer;
  }
  .saveBtn:hover{
    background:#f5f5f5;
  }
}
</style>
